<template>
  <div>
    <goga-header title="添加地址">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div>
      <div class="form-wrapper">
        <form>
          <section class="form-group">
            <input type="text" placeholder="请输入姓名" v-model.trim="aName">
          </section>
          <section class="form-group">
            <input type="tel" placeholder="请输入手机号" v-model.trim="aPhone">
          </section>
          <section class="form-group" @click="showAreaModal()" >
            <input type="text" placeholder="选择所在地区" v-model="areaText" readonly>
          </section>
          <section class="form-group">
            <textarea  placeholder="请填写详细地址" v-model.trim="aDetail"> </textarea>
          </section>
          <section class="from-switch">
            <label for="isDefault">设为默认</label>
            <div class="xxcf-switch">
              <input class="xxcf-switch-core" type="checkbox" id="isDefault" v-model="isDefault">
            </div>
          </section>
          <div class="btn-group">
            <button class="btn btn-default" @click.prevent="submit" :disabled="disabled" >添加地址</button>
          </div>
        </form>
      </div>
    </div>
    <address-area> </address-area>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import addressArea from './area.vue'
  import {validate} from '@utils'

  const fetchAddressData = async function (store) {
    await store.dispatch('backend/tempOrder/getAddress')
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      addressArea
    },
    computed: {
      ...mapGetters({
        getAddress: 'backend/tempOrder/getAddress',
        getArea: 'backend/tempOrder/getArea'
      }),
      areaText() {
        return this.getArea.aShen.text +  this.getArea.aShi.text + this.getArea.aXian.text
      }
    },
    data () {
      return {
        disabled: false,
        aName: '',
        aPhone: '',
        aDetail: '',
        isDefault: true,
        showArea: false
      }
    },
    mounted () {

    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      showAreaModal() {
        this.$store.dispatch('backend/tempOrder/showModal', true)
      },
      async submit() {
        if (!validate.minLength(this.aName, 1)) {
          this.$store.dispatch('global/toast', '请输入姓名');
          return false;
        }
        if (!validate.mobile(this.aPhone)) {
          this.$store.dispatch('global/toast', '请输入手机号');
          return false;
        }
        if (this.getArea.aXian.id == '') {
          this.$store.dispatch('global/toast', '请选择区域');
          return false;
        }
        if (this.aDetail == '') {
          this.$store.dispatch('global/toast', '请填写详细地址');
          return false;
        }
        this.disabled = true;
        let config = {
          aName: this.aName,
          aPhone: this.aPhone,
          aDetail: this.aDetail,
          aDefault: this.isDefault ? 1 : 0,
          aShen: this.getArea.aShen.id,
          aShi: this.getArea.aShi.id,
          aXian: this.getArea.aXian.id,
        }
        let {data: {StatusCode, Status}} = await api.post('api/v1/UserInfo/addAddress.ashx', config);
        if (StatusCode == '200') {
          this.$store.dispatch('global/toast', '地址添加成功');
          fetchAddressData(this.$store);
          this.$router.go(-2);
        } else {
          this.$store.dispatch('global/toast', Status);
        }
        this.disabled = false;
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>